<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交消息提示</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8f9fa;
      min-height: 100vh;
      padding-bottom: 70px;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 导航栏样式 */
    .msg-nav {
      background-color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      padding: 12px 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-actions {
      display: flex;
      gap: 15px;
    }
    
    .nav-btn {
      background: none;
      border: none;
      color: #333;
      font-size: 18px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;
    }
    
    .nav-btn:hover {
      background-color: #f1f1f1;
    }
    
    /* 消息列表样式 */
    .msg-list {
      margin-top: 15px;
    }
    
    /* 消息项通用样式 */
    .msg-item {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
      cursor: pointer;
      display: flex;
      gap: 12px;
    }
    
    .msg-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .msg-item.unread {
      border-left: 4px solid #0d6efd;
    }
    
    /* 头像样式 */
    .msg-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      position: relative;
    }
    
    .avatar-status {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid white;
    }
    
    .status-online {
      background-color: #28a745;
    }
    
    .status-offline {
      background-color: #adb5bd;
    }
    
    .status-busy {
      background-color: #dc3545;
    }
    
    /* 消息内容样式 */
    .msg-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .msg-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    
    .msg-sender {
      font-weight: 600;
      font-size: 16px;
    }
    
    .msg-time {
      font-size: 12px;
      color: #6c757d;
      white-space: nowrap;
    }
    
    .msg-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .msg-text {
      font-size: 14px;
      color: #343a40;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: calc(100% - 40px);
    }
    
    .msg-unread-badge {
      background-color: #0d6efd;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 不同类型消息的特殊样式 */
    .msg-type-system .msg-text {
      font-style: italic;
      color: #6c757d;
    }
    
    .msg-type-like .msg-text {
      color: #dc3545;
    }
    
    .msg-type-like .msg-text i {
      margin-right: 4px;
    }
    
    .msg-type-comment .msg-text {
      color: #28a745;
    }
    
    .msg-type-share .msg-text {
      color: #ffc107;
    }
    
    /* 底部导航栏 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      background-color: white;
      border-top: 1px solid #e9ecef;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      z-index: 100;
    }
    
    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #6c757d;
      text-decoration: none;
      font-size: 12px;
      gap: 5px;
      flex: 1;
    }
    
    .nav-tab.active {
      color: #0d6efd;
    }
    
    .nav-tab i {
      font-size: 20px;
    }
    
    /* 全屏消息详情页样式 */
    .msg-detail-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: white;
      z-index: 1000;
      max-width: 540px;
      margin: 0 auto;
      overflow: hidden;
      flex-direction: column;
    }
    
    .msg-detail-header {
      padding: 15px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .back-btn {
      background: none;
      border: none;
      font-size: 20px;
      color: #333;
    }
    
    .detail-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .detail-info {
      flex: 1;
    }
    
    .detail-name {
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .detail-status {
      font-size: 12px;
      color: #6c757d;
    }
    
    .detail-actions {
      display: flex;
      gap: 10px;
    }
    
    .detail-btn {
      background: none;
      border: none;
      font-size: 18px;
      color: #333;
    }
    
    .msg-detail-body {
      flex: 1;
      padding: 15px;
      overflow-y: auto;
      background-color: #f0f2f5;
    }
    
    .msg-bubble {
      max-width: 75%;
      margin-bottom: 15px;
      padding: 10px 15px;
      border-radius: 18px;
      position: relative;
    }
    
    .msg-received {
      background-color: white;
      align-self: flex-start;
      border-bottom-left-radius: 5px;
      margin-right: auto;
    }
    
    .msg-sent {
      background-color: #0d6efd;
      color: white;
      align-self: flex-end;
      border-bottom-right-radius: 5px;
      margin-left: auto;
    }
    
    .msg-time-stamp {
      font-size: 11px;
      color: #6c757d;
      text-align: right;
      margin-top: 5px;
    }
    
    .msg-input-area {
      padding: 10px 15px;
      border-top: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .msg-input {
      flex: 1;
      border: 1px solid #ced4da;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    
    .msg-input:focus {
      border-color: #0d6efd;
    }
    
    .send-btn {
      background-color: #0d6efd;
      color: white;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    /* 通知提示样式 */
    .toast-notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background-color: rgba(0,0,0,0.8);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 10000;
      transition: transform 0.3s ease;
    }
    
    .toast-notification.show {
      transform: translateX(-50%) translateY(0);
    }
    
    /* 加载更多提示 */
    .load-more {
      text-align: center;
      padding: 15px;
      color: #6c757d;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <div class="msg-nav">
    <div class="container nav-container">
      <h1 class="nav-title">消息</h1>
      <div class="nav-actions">
        <button class="nav-btn" id="searchBtn">
          <i class="fa fa-search"></i>
        </button>
        <button class="nav-btn" id="newMsgBtn">
          <i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 消息列表 -->
  <div class="container msg-list">
    <!-- 好友消息 -->
    <div class="msg-item unread" data-type="friend" data-id="1">
      <div class="msg-avatar">
        <img src="https://picsum.photos/200/200?random=1" alt="头像" class="w-100 h-100 rounded-circle">
        <span class="avatar-status status-online"></span>
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">张明</span>
          <span class="msg-time">10:23</span>
        </div>
        <div class="msg-body">
          <span class="msg-text">嗨，最近怎么样？</span>
          <span class="msg-unread-badge">2</span>
        </div>
      </div>
    </div>
    
    <!-- 点赞消息 -->
    <div class="msg-item msg-type-like" data-type="like" data-id="2">
      <div class="msg-avatar">
        <img src="https://picsum.photos/200/200?random=2" alt="头像" class="w-100 h-100 rounded-circle">
        <span class="avatar-status status-offline"></span>
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">李华</span>
          <span class="msg-time">昨天</span>
        </div>
        <div class="msg-body">
          <span class="msg-text"><i class="fa fa-heart"></i> 赞了你的照片</span>
        </div>
      </div>
    </div>
    
    <!-- 评论消息 -->
    <div class="msg-item msg-type-comment unread" data-type="comment" data-id="3">
      <div class="msg-avatar">
        <img src="https://picsum.photos/200/200?random=3" alt="头像" class="w-100 h-100 rounded-circle">
        <span class="avatar-status status-online"></span>
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">王芳</span>
          <span class="msg-time">昨天</span>
        </div>
        <div class="msg-body">
          <span class="msg-text"><i class="fa fa-comment"></i> 评论了你的动态：这个想法太棒了！</span>
          <span class="msg-unread-badge">1</span>
        </div>
      </div>
    </div>
    
    <!-- 分享消息 -->
    <div class="msg-item msg-type-share" data-type="share" data-id="4">
      <div class="msg-avatar">
        <img src="https://picsum.photos/200/200?random=4" alt="头像" class="w-100 h-100 rounded-circle">
        <span class="avatar-status status-busy"></span>
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">赵伟</span>
          <span class="msg-time">3天前</span>
        </div>
        <div class="msg-body">
          <span class="msg-text"><i class="fa fa-share"></i> 分享了一篇文章给你</span>
        </div>
      </div>
    </div>
    
    <!-- 系统消息 -->
    <div class="msg-item msg-type-system unread" data-type="system" data-id="5">
      <div class="msg-avatar">
        <div class="w-100 h-100 rounded-circle bg-primary d-flex align-items-center justify-content-center text-white">
          <i class="fa fa-bell"></i>
        </div>
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">系统通知</span>
          <span class="msg-time">3天前</span>
        </div>
        <div class="msg-body">
          <span class="msg-text">你的账号已成功升级为会员</span>
          <span class="msg-unread-badge">1</span>
        </div>
      </div>
    </div>
    
    <!-- 群聊消息 -->
    <div class="msg-item" data-type="group" data-id="6">
      <div class="msg-avatar">
        <img src="https://picsum.photos/200/200?random=5" alt="头像" class="w-100 h-100 rounded-circle">
      </div>
      <div class="msg-content">
        <div class="msg-header">
          <span class="msg-sender">前端技术交流群</span>
          <span class="msg-time">上周</span>
        </div>
        <div class="msg-body">
          <span class="msg-text">李明：Bootstrap 5的新特性很赞！</span>
        </div>
      </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
      <button class="btn btn-light btn-sm" id="loadMoreBtn">加载更多</button>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-tab">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-tab">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-tab active">
      <i class="fa fa-bell"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-tab">
      <i class="fa fa-user"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 消息详情页 -->
  <div class="msg-detail-container" id="msgDetail">
    <div class="msg-detail-header">
      <button class="back-btn" id="backBtn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <img src="https://picsum.photos/200/200?random=1" alt="头像" class="detail-avatar">
      <div class="detail-info">
        <div class="detail-name">张明</div>
        <div class="detail-status">在线</div>
      </div>
      <div class="detail-actions">
        <button class="detail-btn">
          <i class="fa fa-phone"></i>
        </button>
        <button class="detail-btn">
          <i class="fa fa-video-camera"></i>
        </button>
        <button class="detail-btn">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
    </div>
    
    <div class="msg-detail-body" id="msgDetailBody">
      <div class="msg-bubble msg-received">
        嗨，最近怎么样？
        <div class="msg-time-stamp">09:45</div>
      </div>
      <div class="msg-bubble msg-sent">
        挺好的，最近在学习新的前端框架
        <div class="msg-time-stamp">09:50</div>
      </div>
      <div class="msg-bubble msg-received">
        是吗？我最近也在研究这个，有空可以交流一下
        <div class="msg-time-stamp">10:23</div>
      </div>
    </div>
    
    <div class="msg-input-area">
      <input type="text" class="msg-input" placeholder="输入消息...">
      <button class="send-btn">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
  </div>
  
  <!-- 通知提示 -->
  <div class="toast-notification" id="toastNotification">
    新消息通知
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 元素获取
    const msgItems = document.querySelectorAll('.msg-item');
    const msgDetail = document.getElementById('msgDetail');
    const backBtn = document.getElementById('backBtn');
    const msgDetailBody = document.getElementById('msgDetailBody');
    const msgInput = document.querySelector('.msg-input');
    const sendBtn = document.getElementById('send-btn');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const toastNotification = document.getElementById('toastNotification');
    const newMsgBtn = document.getElementById('newMsgBtn');
    
    // 消息项点击事件 - 打开消息详情
    msgItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除未读状态
        this.classList.remove('unread');
        const badge = this.querySelector('.msg-unread-badge');
        if (badge) badge.remove();
        
        // 显示消息详情页
        msgDetail.style.display = 'flex';
        
        // 滚动到底部
        setTimeout(() => {
          msgDetailBody.scrollTop = msgDetailBody.scrollHeight;
        }, 100);
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      msgDetail.style.display = 'none';
    });
    
    // 发送消息功能
    function sendMessage() {
      const text = msgInput.value.trim();
      if (!text) return;
      
      // 创建新消息元素
      const now = new Date();
      const timeStr = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
      
      const msgBubble = document.createElement('div');
      msgBubble.className = 'msg-bubble msg-sent';
      msgBubble.innerHTML = `
        ${text}
        <div class="msg-time-stamp">${timeStr}</div>
      `;
      
      // 添加到消息列表
      msgDetailBody.appendChild(msgBubble);
      
      // 清空输入框并滚动到底部
      msgInput.value = '';
      msgDetailBody.scrollTop = msgDetailBody.scrollHeight;
      
      // 模拟回复
      setTimeout(() => {
        const replies = [
          "好的，我知道了",
          "没问题，稍后回复你",
          "这个想法不错！",
          "我需要再考虑一下",
          "可以，就这么办"
        ];
        
        const randomReply = replies[Math.floor(Math.random() * replies.length)];
        const replyBubble = document.createElement('div');
        replyBubble.className = 'msg-bubble msg-received';
        replyBubble.innerHTML = `
          ${randomReply}
          <div class="msg-time-stamp">${timeStr}</div>
        `;
        
        msgDetailBody.appendChild(replyBubble);
        msgDetailBody.scrollTop = msgDetailBody.scrollHeight;
      }, 1000);
    }
    
    // 发送按钮点击事件
    sendBtn.addEventListener('click', sendMessage);
    
    // 输入框回车事件
    msgInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
    
    // 加载更多消息
    loadMoreBtn.addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const container = document.querySelector('.msg-list');
        const loadMore = document.querySelector('.load-more');
        
        // 创建历史消息
        const historyMsgs = [
          {
            name: "陈静",
            avatar: "https://picsum.photos/200/200?random=6",
            time: "1周前",
            text: "周末有空一起去看电影吗？",
            status: "status-offline"
          },
          {
            name: "刘强",
            avatar: "https://picsum.photos/200/200?random=7",
            time: "2周前",
            text: "项目文档已经发送到你邮箱了",
            status: "status-online"
          }
        ];
        
        historyMsgs.forEach(msg => {
          const msgItem = document.createElement('div');
          msgItem.className = 'msg-item';
          msgItem.innerHTML = `
            <div class="msg-avatar">
              <img src="${msg.avatar}" alt="头像" class="w-100 h-100 rounded-circle">
              <span class="avatar-status ${msg.status}"></span>
            </div>
            <div class="msg-content">
              <div class="msg-header">
                <span class="msg-sender">${msg.name}</span>
                <span class="msg-time">${msg.time}</span>
              </div>
              <div class="msg-body">
                <span class="msg-text">${msg.text}</span>
              </div>
            </div>
          `;
          
          // 添加点击事件
          msgItem.addEventListener('click', function() {
            msgDetail.style.display = 'flex';
            setTimeout(() => {
              msgDetailBody.scrollTop = msgDetailBody.scrollHeight;
            }, 100);
          });
          
          container.insertBefore(msgItem, loadMore);
        });
        
        this.textContent = '没有更多消息';
        this.disabled = true;
        this.classList.add('opacity-50');
      }, 1500);
    });
    
    // 显示通知提示
    function showToast(message) {
      toastNotification.textContent = message;
      toastNotification.classList.add('show');
      
      setTimeout(() => {
        toastNotification.classList.remove('show');
      }, 3000);
    }
    
    // 新消息按钮点击事件
    newMsgBtn.addEventListener('click', function() {
      showToast('新建消息功能开发中');
    });
    
    // 搜索按钮点击事件
    document.getElementById('searchBtn').addEventListener('click', function() {
      showToast('搜索功能开发中');
    });
    
    // 模拟新消息推送
    setTimeout(() => {
      showToast('张明发送了一条新消息');
      
      // 更新消息列表中的未读状态
      const firstMsg = document.querySelector('.msg-item[data-id="1"]');
      if (!firstMsg.classList.contains('unread')) {
        firstMsg.classList.add('unread');
        const msgBody = firstMsg.querySelector('.msg-body');
        if (!msgBody.querySelector('.msg-unread-badge')) {
          const badge = document.createElement('span');
          badge.className = 'msg-unread-badge';
          badge.textContent = '1';
          msgBody.appendChild(badge);
        }
      }
    }, 5000);
  </script>
</body>
</html>
